<template>
  <v-chart
    class="chart"
    :option="{
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      series: [
        {
          name: o.name,
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: o.data,
        },
      ],
    }"
  />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TooltipComponent } from "echarts/components";
import VChart from "vue-echarts";

use([CanvasRenderer, PieChart, TooltipComponent]);

export default {
  name: "Cycle",
  props: ["o"],
  components: {
    VChart,
  },
};
</script>

<style scoped>
.chart {
  height: 300px;
}
</style>

<style>
body {
  margin: 0;
}
</style>
